<template>
  <view>
    <!-- 固定在顶部的 Header 和 Search -->
    <view class="header-container">
      <Header title="牲畜列表">
        <uv-icon name="arrow-left" size="18" color="#000"></uv-icon>
      </Header>
      <!-- 搜索结果容器，背景颜色与 Header 不同 -->
      <view class="search-container">
        <uv-search 
          shape="square" 
          bgColor="white" 
          :showAction="false"
          placeholder="输入牲畜名称或IMEI查询"
        ></uv-search>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="body">
      <!-- 列表内容 -->
      <view v-for="(item, index) in livestockSonlist" :key="index">
        <livestockSon 
          :item="item" 
          @onItemClick="handleItemClick"
        ></livestockSon>
      </view>

      <!-- 加载更多提示 -->
      <view v-if="loading" class="loading">{{ loadingText }}</view>
    </view>
  </view>
</template>

<script setup>
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';
import Header from '@/components/AppHeader/Header.vue';
import livestockSon from '@/components/livestockson/livestockSon.vue';
import { getCattleList } from '@/api/livestock';
import { ref, onMounted } from 'vue';
import { onReachBottom as uniOnReachBottom } from '@dcloudio/uni-app'; // 导入正确的生命周期钩子

// 分页相关变量
const page = ref(1);
const pageSize = ref(10);
const totalElements = ref(0);
const allListItem = ref(false);
const loading = ref(false);
const loadingText = ref('加载中...');

// 初始化空列表数据
const livestockSonlist = ref([]); // 初始化为空数组，不再使用静态数据

// 获取牲畜列表数据
const fetchCattleList = async () => {
  try {
    loading.value = true;
    loadingText.value = '加载中...';
    
    const res = await getCattleList({ page: page.value, size: pageSize.value });
    if (res.code === 200) {
      totalElements.value = res.totalElements;
      const mappedData = res.data.map(item => ({
        F_Id: item.F_Id,
        bh: '牲畜编号',
        imei: item.F_IMEI,
        img: '/static/map/cow.png'
      }));
      
      // 替换或追加数据
      if (page.value === 1) {
        livestockSonlist.value = mappedData; // 确保替换初始数据
      } else {
        livestockSonlist.value = [...livestockSonlist.value, ...mappedData];
      }
      
      // 检查是否已加载全部
      if (page.value * pageSize.value >= totalElements.value) {
        allListItem.value = true;
        loadingText.value = '已加载全部数据';
      }
    }
  } catch (error) {
    console.error("请求失败:", error);
    loadingText.value = '加载失败';
  } finally {
    loading.value = false;
  }
};

// 页面加载时获取数据
onMounted(fetchCattleList);

// 触底加载处理函数
const handleReachBottom = () => {
  if (!allListItem.value && !loading.value) {
    page.value++;
    fetchCattleList();
  }
};

// 正确注册触底事件
uniOnReachBottom(handleReachBottom);

// 列表项点击处理
const handleItemClick = (item) => {
  uni.setStorageSync('F_Id', item.F_Id);
  uni.navigateTo({ url: '/pages/livestock/livestockInformation' });
};
</script>

<style scoped lang="scss">
// 顶部固定区域（包含 Header 和 Search）
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: white; // Header 背景颜色

  // 搜索框容器样式
  .search-container {
    background-color: #f3f5f8; // 设置与 body 相同的背景色
    padding: 30rpx;
    position: sticky; // 使用 sticky 或 fixed 定位
    top: 100rpx; // 根据 Header 实际高度调整（示例值）
    left: 0;
    right: 0;
    z-index: 100;
  }
}

// 内容区域（调整顶部内边距）
.body {
  width: 750rpx;
  background-color: #f3f5f8;
  padding-top: 280rpx; // Header高度 + Search容器高度（根据实际值调整）
  min-height: 81vh;
  overflow-y: auto; /* 允许垂直滚动 */
}

// 牲畜列表项样式
.cow-list {
  width: 690rpx;
  height: 120rpx;
  background-color: #fff;
  margin-top: 20rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;
  display: flex;
}

.img {
  width: 120rpx;
  height: 120rpx;
}

.msg {
  flex: 1;
  padding-top: 24rpx;
}

.arrow-right {
  width: 60rpx;
  height: 100%;
  display: flex;
  align-items: center;
}

image {
  width: 72rpx;
  height: 72rpx;
  margin: 24rpx;
}

.bh {
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

// 加载更多提示
.loading {
  text-align: center;
  padding: 20rpx;
  color: #999;
}
</style>